<template>
    <div class="main-box">  
        <div class="main">
            <p class="p-title">{{ title }}</p>
            <div @click="addOrderForm" class="addOrder-Form">新增订单</div>
            <p class="p-title">{{ title1 }}</p>
            <div class="table">
                <div class="table-head-box">
                    <div class="table-head">
                        <span class="table-head-item" v-for="(t,i) in Object.values(orderForGoodsForm)" :key="i">{{ t }}</span>
                        <span class=" emit" >编辑</span>
                    </div>
                </div>
                <div class="table-body-box">
                    <div class="table-body"  
                    @dragenter="dragenter($event, index)"
                    @dragover="dragover($event, index)"
                    @dragstart="dragstart(index)"
                    draggable
                    v-for="(item,index) in orderForGoodsFormList" 
                    :key="item.orderNum">
                        <span class="table-body-item" v-for="(t,i) in Object.keys(item)" :key="i">{{ item[t] }}</span>
                        <span class="remove" @click="removeOrder(index)">删除订单</span>
                    </div>
                </div>
            </div>
        </div>
        <transition enter-active-class="animate__animated animate__fadeIn animate__faster"
        leave-active-class="animate__animated animate__fadeOut animate__faster">
            <div class="modal-box" v-show="PopUpShowInfo.show" @click="closeModelPupUp" >
                <div class="internal-limit">
                    <p class="p-title">新增订单</p>
                    <div class="add type1">
                        <div class="add-body" v-show="PopUpShowInfo.type==='form'">
                            <p class="number">订单编号：{{ orderForGoodsFormInfo.number }}</p>
                            <div class="add-input">
                                <label for="orderType">
                                    <span>订单类型：</span>
                                    <select name="select " id="orderType" v-model="orderForGoodsFormInfo.orderType">
                                        <option :value="item.value" v-for="(item,index) in orderTypeOption" :key="index">{{ item.label }}</option>
                                    </select>
                                </label>
                            </div>
                            <div class="add-input">
                                <label for="userType">
                                    <span>用户类型：</span>
                                    <select name="select " id="userType" v-model="orderForGoodsFormInfo.userType">
                                        <option :value="item.value" v-for="(item,index) in userTypeOption" :key="index">{{ item.label }}</option>
                                    </select>
                                </label>
                            </div>
                            <div class="add-input">
                                <label for="name">
                                    <span>用户名称：</span>
                                    <input type="text" id="name" v-model="orderForGoodsFormInfo.userName">
                                </label>
                            </div>
                            <div class="add-input">
                                <label for="time">
                                    <span>启动时间：</span>
                                    <input type="datetime-local" v-model="orderForGoodsFormInfo.firingTime" :defaultValue="orderForGoodsFormInfo.firingTime"  name=""  id="time">
                                </label>
                            </div>
                            <div class="add-input">
                                <label for="num">
                                    <span>数量：</span>
                                    <input type="number" id="num" v-model="orderForGoodsFormInfo.Num">
                                </label>
                            </div>
                            <div class="add-input">
                                <label for="level">
                                    <span>工序优先级：</span>
                                    <select name="select " id="level" v-model="orderForGoodsFormInfo.level">
                                        <option :value="item.value" v-for="(item,index) in levelOption" :key="index">{{ item.label }}</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                        <div class="add-body" v-show="PopUpShowInfo.type==='configuration'">
                            <p class="number">配置加工参数</p>
                            <div class="processParameter">
                                <p><span>装配时间：</span> <input type="number" v-model="orderForGoodsFormInfo.assembleTime"> <span>秒</span></p>
                                <p><span>装配次数：</span> <input type="number" v-model="orderForGoodsFormInfo.assembleNum"> <span>次</span></p>
                                <p><span>钻孔时间：</span> <input type="number" v-model="orderForGoodsFormInfo.drillTime"> <span>秒</span></p>
                                <p><span>钻孔次数：</span> <input type="number" v-model="orderForGoodsFormInfo.drillNum"> <span>次</span></p>
                            </div>
                        </div>
                        <div class="add-body" v-show="PopUpShowInfo.type==='assemble'">
                            <p class="number"></p>
                            <div class="formbox">
                                <div class="formbox-left">
                                    <div class="item">
                                        <span>订单编号</span>
                                        <p><input type="text" v-model="orderForGoodsFormInfo.orderNum"></p>
                                    </div>
                                    <div class="item">
                                        <span>下单时间</span>
                                        <p><input type="text" v-model="orderForGoodsFormInfo.placeAnOrderTime"></p>
                                    </div>
                                    <div class="item">
                                        <span>用户名</span>
                                        <p><input type="text" v-model="orderForGoodsFormInfo.userName"></p>
                                    </div>
                                    <div class="item">
                                        <span>优先级</span>
                                        <p><input type="text" v-model="orderForGoodsFormInfo.level"></p>
                                    </div>
                                    <div class="item">
                                        <span>钻孔时间</span>
                                        <p><input type="text" v-model="orderForGoodsFormInfo.drillTime"><span>秒</span></p>
                                    </div>
                                    <div class="item">
                                        <span>钻孔次数</span>
                                        <p><input type="text" v-model="orderForGoodsFormInfo.drillNum"><span>次</span></p>
                                    </div>
                                </div>
                                <div class="formbox-right">
                                    <div class="item">
                                        <span>订单类型</span>
                                        <p><input type="text" v-model="orderForGoodsFormInfo.orderType"></p>
                                    </div>
                                    <div class="item">
                                        <span>启动时间</span>
                                        <p><input type="text" v-model="orderForGoodsFormInfo.firingTime"></p>
                                    </div>
                                    <div class="item">
                                        <span>运行数量</span>
                                        <p><input type="text" v-model="orderForGoodsFormInfo.Num"><span>个</span></p>
                                    </div>
                                    <div class="item">
                                        <span>装配时间</span>
                                        <p><input type="text" v-model="orderForGoodsFormInfo.assembleTime"><span>秒</span></p>
                                    </div>
                                    <div class="item">
                                        <span>装配次数</span>
                                        <p><input type="text" v-model="orderForGoodsFormInfo.assembleNum"><span>次</span></p>
                                    </div>
                                    <div class="item">
                                        <span>订单状态</span>
                                        <p><input type="text" v-model="orderForGoodsFormInfo.orderState"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="btn">
                            <div class="mouse-hand return" v-show="PopUpShowInfo.type!=='form'" @click="GoBack">返回上一级</div>
                            <div class="configuration mouse-hand" @click="configuration" v-show="PopUpShowInfo.type==='form'" :class="
                                (orderForGoodsFormInfo.orderType && 
                                orderForGoodsFormInfo.userType && 
                                orderForGoodsFormInfo.userName && 
                                orderForGoodsFormInfo.firingTime && 
                                orderForGoodsFormInfo.level) ? 'configuration-activation' : ''
                            "> 配置参数</div>
                            <div class="mouse-hand subimt" @click="configuration" v-show="PopUpShowInfo.type==='configuration'"
                            :class="
                                (orderForGoodsFormInfo.assembleTime && 
                                orderForGoodsFormInfo.assembleNum && 
                                orderForGoodsFormInfo.drillTime && 
                                orderForGoodsFormInfo.drillNum ) ? 'configuration-activation' : ''
                            ">提交订单</div>
                            <div class="mouse-hand subimt" @click="configuration" v-show="PopUpShowInfo.type==='assemble'" :class="
                                (Object.values(this.orderForGoodsFormInfo).every((item)=>{
                                    if (item === 0) {
                                        return true
                                    }
                                    return Boolean(item)
                                })) ? 'configuration-activation' : ''
                            ">确认</div>
                        </div>
                        
                    </div>

                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import {Add_orderForGoodsForm,orderTypeOption,userTypeOption,levelOption,orderStateOption} from '@/utils/CommonObject'
import {format} from '@/utils/PublicMethods'
export default {
    data() {
        return {
            title: '订单界面操作',
            title1:'待下发订单',
            orderForGoodsForm:Add_orderForGoodsForm,
            orderForGoodsFormInfo:{
                orderNum:'',
                orderType:'',
                userType:'',
                userName:'',
                firingTime:format('YYYY-MM-DD hh:mm'),
                placeAnOrderTime:'',
                Num:0,
                level:'',
                assembleTime:'',
                drillTime:'',
                assembleNum:'',
                drillNum:'',
                orderState:'',
            },
            PopUpInfo:{
                show:false,
                content: '',
                classShow:false,
            },
            levelOption:levelOption,
            orderTypeOption:orderTypeOption,
            userTypeOption:userTypeOption,
            orderStateOption:orderStateOption,
            orderForGoodsFormList:[
                {
                    orderNum:'123456789',
                    orderType:'急促',
                    userType:'管理员',
                    userName:'雷乐梵',
                    firingTime:'2024-03-01 22:24',
                    placeAnOrderTime:'2024-02-01 22:24',
                    Num:'1',
                    level:'2',
                    assembleTime:'1000',
                    drillTime:'1000',
                    assembleNum:'19',
                    drillNum:'1',
                    orderState:'结束',
                },
                {
                    orderNum:'12345678',
                    orderType:'急促',
                    userType:'管理员',
                    userName:'雷乐梵',
                    firingTime:'2024-03-01 22:24',
                    placeAnOrderTime:'2024-02-01 22:24',
                    Num:'1',
                    level:'2',
                    assembleTime:'1000',
                    drillTime:'1000',
                    assembleNum:'19',
                    drillNum:'1',
                    orderState:'结束',
                },
                {
                    orderNum:'1234578',
                    orderType:'急促',
                    userType:'管理员',
                    userName:'雷乐梵',
                    firingTime:'2024-03-01 22:24',
                    placeAnOrderTime:'2024-02-01 22:24',
                    Num:'1',
                    level:'2',
                    assembleTime:'1000',
                    drillTime:'1000',
                    assembleNum:'19',
                    drillNum:'1',
                    orderState:'结束',
                },
            ],
            PopUpShowInfo:{
                show:false,
                type:'form',//form configuration assemble
            },
            dragIndex: '',
            enterIndex: '',
        }
    },
    methods: {
        closeModelPupUp(event){
            if (event.target.className === 'modal-box') {
                this.PopUpShowInfo.show = false;
            }
        },
        addOrderForm(){
            this.PopUpShowInfo.show = true;
            console.log('新增');
        },
        removeOrder(index){
            this.orderForGoodsFormList.splice(index,1)
            this.PopUpInfo.content = '删除成功'
            this.PopUpInfo.successShow = true
            this.$bus.$emit('openUpPop', this.PopUpInfo);
        },
        configuration(){
            console.log(this.orderForGoodsFormInfo);
            // console.log(this.orderForGoodsFormInfo.orderType
            //     ,this.orderForGoodsFormInfo.userType
            //     ,this.orderForGoodsFormInfo.userName
            //     ,this.orderForGoodsFormInfo.firingTime
            //     ,this.orderForGoodsFormInfo.level,'aaaaaaaaaaaaaaa');
            if (this.PopUpShowInfo.type === 'form') {
                if(this.orderForGoodsFormInfo.orderType && 
                this.orderForGoodsFormInfo.userType && 
                this.orderForGoodsFormInfo.userName && 
                this.orderForGoodsFormInfo.firingTime && 
                this.orderForGoodsFormInfo.level ){
                    this.PopUpShowInfo.type = 'configuration';
                }
            }else if (this.PopUpShowInfo.type === 'configuration'){
                if(this.orderForGoodsFormInfo.assembleTime && 
                this.orderForGoodsFormInfo.assembleNum && 
                this.orderForGoodsFormInfo.drillTime && 
                this.orderForGoodsFormInfo.drillNum){
                    this.PopUpShowInfo.type = 'assemble';
                }
            }else if (this.PopUpShowInfo.type === 'assemble'){
                console.log(Object.values(this.orderForGoodsFormInfo),Object.keys(this.orderForGoodsFormInfo),'Object.values(this.orderForGoodsFormInfo)');
                console.log(Object.values(this.orderForGoodsFormInfo).every((item)=>Boolean(item)),'aaaaaaaaaaaaaaa');
                if (!Object.values(this.orderForGoodsFormInfo).every((item)=>{
                        if (item === 0 || item === '0') {
                            return true
                        }
                        return Boolean(item)
                    })
                ) {
                    return
                }
                this.orderForGoodsFormList.push(this.orderForGoodsFormInfo) 
                
                this.PopUpShowInfo.show = false;
                this.PopUpInfo.content = '下单成功'
                this.PopUpInfo.successShow = true
                this.$bus.$emit('openUpPop', this.PopUpInfo);

            }
        },
        GoBack(){
            if (this.PopUpShowInfo.type === 'assemble') {
                this.PopUpShowInfo.type = 'configuration'
            }else if(this.PopUpShowInfo.type === 'configuration'){
                this.PopUpShowInfo.type = 'form'
            }
        },
        dragstart(index) {
            this.dragIndex = index;
        },
        dragover(e, index) {
            e.preventDefault();
        },
        dragenter(e, index) {
            e.preventDefault();
            // 避免源对象触发自身的dragenter事件
            if (this.dragIndex !== index) {
            const source = this.orderForGoodsFormList[this.dragIndex];
            this.orderForGoodsFormList.splice(this.dragIndex, 1);
            this.orderForGoodsFormList.splice(index, 0, source);
            // 排序变化后目标对象的索引变成源对象的索引
            this.dragIndex = index;
            }
        },
    },
    mounted() {
        
    }
}
</script>

<style lang="less" scoped>
.main-box{
    background-color: #ffffff;
    padding: 10px;
    box-sizing: border-box;
    .main{
        background-color: #eaeaea;
        width: 100%;
        height: 100%;
        border-radius: 10px;

        .p-title{
            font-size: 1.5rem;
            font-family: 400;
            padding: 15px 0 ;
            border-bottom: 1px solid #adadad;
        }
        .addOrder-Form{
            background-color: #7239ea;
            color: white;
            border-radius: 8px;
            width: 100px;
            text-align: center;
            padding: 10px 0;
            margin: 1rem 0 4rem 0;
        }
        .table{
            margin-top: 10px;
            .table-head-box{
                border: 1px solid #adadad;
                border-radius: 5px;
                padding: 10px 10px;

                background: #FFFFFF;
                .table-head{
                    display: flex;
                    justify-content:space-around;
                    padding: 10px 10px;
                    align-items: baseline;
                    .table-head-item{
                        flex: 1;
                        text-align: center  ;

                    }
                    .emit{
                        color: rgb(0, 0, 0);
                        text-align: center  ;
                        width: 80px!important;
                    }
                }
            }
            .table-body-box{
                border: 1px solid #adadad;
                border-radius: 5px;
                padding: 10px 10px;
                background: #FFFFFF;
                .table-body{
                    display: flex;
                    justify-content:space-around;
                    padding: 10px 10px;
                    border: 1px solid #adadad;
                    border-radius: 5px;
                    margin: 0 0 15px 0;
                    align-items: baseline;
                    .table-body-item{
                        flex: 1;
                        text-align: center  ;
                    }
                    .remove{
                        color: white;
                        text-align: center  ;
                        background: #f3406a;
                        border-radius: 8px;
                        padding: 5px 0;
                        width: 80px!important;
                    }
                }
            }
        }
    }
}
.modal-box{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    .internal-limit{
        background-color: white;
        border-radius: 7px;
        min-width: 40rem;
        min-height: 20rem;
        position: relative;
        .title{
            text-align: center;
            font-size: 1.7rem;
            font-family: 600;
        }
        .text{
            padding: 20px;
            position: relative;
            overflow-y: auto;
            max-width: 50rem;
            max-height: 60rem;
        }
        .p-title{
            font-size: 1.1rem;
            font-family: 400;
            padding: 10px ;
            border-bottom: 1px solid #adadad;
        }
        .add{
            padding: 30px;
            .add-body{
                .number{
                    font-size: 1.6rem;
                    margin-bottom: 14px;

                }
                .add-input{

                    margin-bottom: 14px;
                    label{
                        display: flex;
                        flex-direction: column;
                    }
                    span{
                        font-size: 1.1rem;
                        font-family: 400;
                        margin-bottom: 4px;
                    }
                    &:last-of-type {
                        margin-bottom: 100px;
                    }
                }
                input,select{
                    border: 1px solid #adadad;
                    border-radius: 5px;
                    height: 35px;
                    padding: 0 0 0 10px ;
                }
                .processParameter{
                    margin-bottom: 14px;
                    display: flex;
                    flex-direction: column;
                    p{
                        margin-bottom: 15px;
                    }
                }
                .formbox{
                    display: flex;
                    justify-content: space-between;
                    .item{
                        display: flex;
                        align-items: center;
                        margin-bottom: 15px;
                        span:nth-child(1){
                            display: inline-block;
                            width: 80px;

                        }
                        p{
                            width: 300px;
                            display: flex;
                            align-items: center;

                            input{
                                flex: 1;
                            }
                            span{
                                margin: 0 5px;
                            }
                        }
                    }
                    .formbox-left{
                        width: 45%;
                    }
                    .formbox-right{
                        width: 45%;

                    }
                }
            }
        }
        .btn{
            display: flex;
            .mouse-hand{
                margin-right: 20px;
            }
            .configuration{
                color: rgb(0, 0, 0);
                width: 70px;
                padding: 10px;
                text-align: center;
                border-radius: 6px;
                border: 1px solid rgb(150, 237, 64);
                background: white;
            }
            // .configure{
            // }
            .return{
                color: white;
                width: 70px;
                padding: 10px;
                text-align: center;
                border-radius: 6px;
                background: #0c9ced;
            }
            .subimt{
                color: rgb(64, 64, 64);
                width: 70px;
                padding: 10px;
                text-align: center;
                border-radius: 6px;
                background: #ffffff;
                border: 1px solid rgb(150, 237, 64);
            }
            .configuration-activation{
                background: rgb(150, 237, 64);
                color: white;
                transition: all 0.5s;
                border: none;
            }
        }
    }
}
</style>